<template>
  <div>
    <div>状态管理</div>
    <div>
      <a-button type="primary" @click="store.increment()">增加</a-button>
    </div>
    <ChildA></ChildA>
    <ChildB></ChildB>
    <div>以上是通过响应式 API 做简单状态管理以实现的</div>
    <div>在选项式 API 中，响应式数据是用 data() 选项声明的。</div>
    <div>
      在内部，data() 的返回值对象会通过 reactive() 这个公开的 API
      函数转为响应式。
    </div>
    <a-divider></a-divider>
    <div>
      <div>下一代状态管理器</div>
      <div>
        <a href="https://pinia.vuejs.org/zh/">pinia</a>
      </div>
    </div>
  </div>
</template>

<script>
import { store } from "./store";
import ChildA from "./ChildA.vue";
import ChildB from "./ChildB.vue";
export default {
  components: {
    ChildA,
    ChildB,
  },
  data() {
    return {
      store,
    };
  },
};
</script>

<style></style>
